<style lang="less">
    @import "../../libs/animate.css";
    .menulist {
        width: 100%;
        height: 100%;
        //z-index: 6;
        background: #495060;
        text-align: left;
        position: relative;
        z-index: 899;
        h2 {
            display: inline-block;
            width: 100%;
            border-right: 1px solid rgb(73, 80, 96);
            line-height: 60px;
            text-align: center;
            background: rgb(73, 80, 96);
            color: #fff;
        }
        .mymenu {
            position: absolute;
            top: 60px;
            left: 0;
            right: 0;
            bottom: 0;
            overflow-x: hidden;
            overflow-y: auto;
        }
        .allmenu{
            position: relative;
            color: #fff;
        }
        .menubut{
            position: absolute;
            bottom: 50px;
            right: 20px;
            z-index: 910;
        }
        .allmenuitem {
            width: 20%;
            text-align: center;
            height: 150px;
            color: #fff;
            position: relative;
            &:hover{
                color: #ccc;
                cursor: pointer;
            }
        }
    }
</style>
<template>
    <div class="menulist">
        <h2>嘉喆管理系统</h2>
        <Button class="menubut" type="primary" @click="close" v-show="!menutoggle">关闭</Button>
        <Menu v-if="menutoggle" class="mymenu" theme="dark" width="auto" :active-name="activename" :open-names="opennames" @on-select="onSelect">
            <template v-for="menuitem in menulist">
                <MenuItem v-if="menuitem.children.length === 0" :name="menuitem.id">
                    <i class="iconfont" :class="menuitem.icon"></i>
                    {{ menuitem.name }}
                </MenuItem>
                <Submenu v-else :name="menuitem.id">
                    <template slot="title">
                        <i class="iconfont" :class="menuitem.icon"></i>
                        {{ menuitem.name }}
                    </template>
                    <template v-for="children in menuitem.children">
                        <MenuItem :name="children.id">
                            <i class="iconfont" :class="children.icon"></i>
                            {{ children.name }}
                        </MenuItem>
                    </template>
                </Submenu>
            </template>
        </Menu>
        <div v-else="!menutoggle" class="allmenu">
            <div style="display: flex;flex-wrap: wrap;margin: auto 10%;margin-top: 10%;">
                <div class="allmenuitem" @click="syclick">
                    <i class="iconfont icon-home" style="font-size: 80px;"></i>
                    <p>首页</p>
                </div>
                <template v-for="menuitem in menulist">
                    <div class="allmenuitem" @click="menuclick(menuitem)">
                        <i class="iconfont" :class="menuitem.icon" style="font-size: 80px;"></i>
                        <p>{{ menuitem.name }}</p>
                    </div>
                </template>
            </div>
            <div style="position: fixed;bottom: 80px;left: 0;right:0;text-align: center;box-shadow: none;">
                <div v-show="showmenu.length > 0" class="animated fadeIn" style="width: auto;box-shadow: none;">
                    <span v-for="item2 in showmenu" style="margin: 10px 10px;cursor: pointer" @click="menuclick(item2)">{{ item2.name }}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import menudata from './menuData.js'
    export default {
        props: {
            activename: {
                type: String,
                default: 'sy',
                url: '#'
            },
            menutoggle: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            menulist () {
                return menudata
            }
        },
        data () {
            return {
                opennames: [],   //  打开的菜单栏集合
                showmenu: []
            }
        },
        methods: {
            syclick () {
                this.showmenu = []
                this.$emit('menuToggleClick', true)
                this.$emit('on-select', {
                    name: '首页',
                    id: 'sy',
                    url: '#'
                })
            },
            menuclick (name) {
                if (name.children) {
                    if (name.children.length > 0) {
                        this.showmenu = name.children
                    } else {
                        this.showmenu = []
                        this.$emit('menuToggleClick', true)
                        this.$emit('on-select', name)
                    }
                } else {
                    this.showmenu = []
                    this.$emit('menuToggleClick', true)
                    this.$emit('on-select', name)
                }
            },
            close () {
                this.$emit('menuToggleClick')
            },
            onSelect (name) {
                this.$emit('menuToggleClick', true)
                let menuItem
                this._.forEach(this.menulist, (menuitem) => {
                    if (menuitem.id === name) {
                        menuItem = menuitem
                        return
                    }
                    if (menuitem.children.length > 0) {
                        let children = menuitem.children
                        this._.forEach(children, (childrenitem) => {
                            if (childrenitem.id === name) {
                                menuItem = childrenitem
                                return
                            }
                        })
                    }
                });
                this.$emit('on-select', menuItem)
            }
        },
        mounted: () => {
        }
    };
</script>
